<style>
#rect {
    width: 300px;
    height: 300px;
    border: 5px solid black;
}
</style>
<div id=rect></div>
<pre id=out></pre>
<script>
function handle(e) {
    var out = document.getElementById('out');
    out.innerHTML = `${e.type} | client: ${e.clientX}x${e.y} | screen: ${e.screenX}x${e.screenY} | ${e.ctrlKey ? 'CTRL' : ''} ${e.shiftKey ? 'Shift' : ''} ${e.altKey ? 'Alt' : ''}\n${out.innerHTML}`;
}

var rect = document.getElementById('rect');
rect.onmousedown = handle;
rect.onmousemove = handle;
rect.onmouseup = handle;
rect.onclick = handle;
rect.ondblclick = handle;
</script>
